<template>
  <div ref="chartContainer" :style="{ width: size + 'px', height: size + 'px' }"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    value: {
      type: Number,
      required: true,
      validator(value) {
        return value >= 0 && value <= 1;
      }
    },
    size: {
      type: Number,
      default: 200
    },
    color: {
      type: String,
      default: '#5cb85c'
    },
	color_bg: {
	  type: String,
	  default: '#5cb85c'
	}
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chartContainer);
      const option = {
        series: [
          {
            type: 'pie',
            radius: ['80%', '90%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '10',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: this.value * 100,
                name: '',
                itemStyle: {
                  color: this.color
                }
              },
              {
                value: (1 - this.value) * 100,
                name: '',
                itemStyle: {
                  color: this.color_bg
                }
              }
            ]
          }
        ]
      };
      chart.setOption(option);
      this.$once('hook:beforeDestroy', () => {
        chart.dispose();
      });
    }
  }
};
</script>